<template>
  <article class="detail-page">
    <template v-for="(ele, index) in myschemas" :key="index">
      <n-descriptions :title="ele.mytitle" bordered v-bind="$attrs">
        <template v-for="item in ele.schemas" :key="item.field">
         <!--  空间信息不展示 -->
          <div v-if="item.component==='SpaceEdit'"></div>
          <n-descriptions-item
            v-else-if="
              isNullOrUnDef(item.isShow) ||
              item.isShow === true ||
              (typeof item.isShow !== 'boolean' && item.isShow(formData, item) === true)
            "
            :label="item.label + '：'"
            :span="item?.giProps?.span || 1"
            v-bind="item.dprops"
          >
            <slot :name="item.field" :data="{ data: formData, field: item.field, schema: item }">
              <div v-if="item.component === 'NAreaSelect'">
                {{ formData[item.moreField] }}
              </div>
              <div v-else-if="item.component === 'NSelect' || item.component === 'NRadioGroup'">
                {{ getValByOptions(item, formData[item.field]) }}
              </div>
              <template v-else-if="item.component === 'NImgUpload'">
                <n-image-group>
                  <n-space>
                    <n-image
                      v-for="(img, index) in getImgArr(formData[item.field])"
                      :key="index"
                      width="100"
                      :src="img.url"
                    />
                  </n-space>
                </n-image-group>
              </template>
              <template v-else-if="item.component === 'NUpload'">
                <div class="file-list">
                  <a
                    v-for="(img, index) in getImgArr(formData[item.field])"
                    :key="index"
                    href="img"
                    @click.prevent="download(img.name, img.url)"
                    >{{ img.name }}</a
                  >
                </div>
              </template>
              <div v-else-if="item.component === 'NTinymce'" v-html="formData[item.field]"> </div>
              <div v-else>
                {{ formData[item.field] || '-' }}
              </div>
            </slot>
          </n-descriptions-item>
        </template>
      </n-descriptions>
    </template>
  </article>
</template>
<script lang="ts" setup>
  import { PropType } from 'vue';
  import { IDetailItem } from './interface';
  import { SelectProps } from 'naive-ui';
  import { computed } from '@vue/reactivity';
  import { isArray, isNullOrUnDef } from '@/utils/is';
  import FileSaver from 'file-saver';
import { el } from 'date-fns/locale';
import SlashAppContext from '@/context/SlashAppContext';
const VITE_FILE_BASE_URL:string  = SlashAppContext.fileBaseUrl();
  const props = defineProps({
    formData: {
      type: Object,
      default: () => ({}),
    },
    schemas: {
      type: Array as PropType<IDetailItem[]>,
      default: () => [],
    },
  });
  const getName = (str: string) => (str ? str.split('/').pop() : '');
  function getImgArr(val: string | Array<string>) {
    if (!val) return [];
    const arr: string[] = isArray(val) ? (val as string[]) : val.split(',');
    return arr.map((str, index) => ({
      name: getName(str),
      url: VITE_FILE_BASE_URL + str,
    }));
  }
  function download(name: string, url: string) {
    FileSaver.saveAs(url, name);
  }

  function getValByOptions(data: IDetailItem, val: string) {
    if(!val)return val
    const { options, multiple } = data.componentProps as SelectProps;
    if (options && options.length > 0) {
      const optionsObj = new Map();
      options.forEach((item) => {
        optionsObj.set(item.value, item.label);
      });
      let items = [val];
      if (multiple) {
        items = val.split(',');
      }
      return items
        .map((item) => {
          return optionsObj.get(item) || item;
        })
        .join(',');
    }
    return val;
  }
  const myschemas = computed(() => {
    const result: Array<{  mytitle: string; schemas: IDetailItem[] }> = [];
    let count = 0;
    for (let i = 0; i < props.schemas.length; i++) {
      const item = props.schemas[i];
      if (i === 0) {
        result[count] = {
          mytitle: item.isTitle ? item.label : '',
          schemas: item.isTitle ? [] : [item],
        };
      } else if (item.isTitle) {
        count++;
        result[count] = {  mytitle: item.label, schemas: [] };
      } else {
        result[count].schemas.push(item);
      }
    }
    console.log(result)
    return result;
  });
</script>
<style lang="less" scoped>
  .detail-page {
    padding: 5px;
    :deep(.n-descriptions-table-header) {
      --n-th-font-weight: bold;
    }
  }
  :deep(.n-descriptions) {
    .n-descriptions-header {
      margin-bottom: 10px;
    }
    margin-bottom: 10px;
  }
  .file-list {
    a {
      display: block;
    }
  }
</style>
